<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
   <el-dialog title="添加用户" :visible.sync="dialogVisible" width="50%" @close="closeDialog">
     <el-form :model="saveuser" :rules="rules" ref="addUserRef" label-width="100px" >
       <el-form-item label="用户名" prop="username">
         <el-input v-model="saveuser.username"></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="password">
         <el-input v-model="saveuser.password" type="password"></el-input>
       </el-form-item>
       <el-form-item label="密码确认" prop="password2">
         <el-input v-model="saveuser.password2" type="password"></el-input>
       </el-form-item>
       <el-form-item label="电话" prop="phone">
         <el-input v-model="saveuser.phone"></el-input>
       </el-form-item>
       <el-form-item label="邮箱" prop="email">
         <el-input v-model="saveuser.email"></el-input>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="addUserBtn">确 定</el-button>
     </span>
   </el-dialog>
    <el-table :data="user" border>
        <el-table-column
          prop="id"
          label="编号">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
         <template v-slot="scope">
            <el-switch v-model="scope.row.status" @change="updateStatus(scope.row)"
              active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
         </template>
        </el-table-column>
        <el-table-column label="操作">
           <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="small" @click="updateUserBtn(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteUser(scope.row)"></el-button>
           </template>
        </el-table-column>
      </el-table>
      </el-dialog>

      <!-- 定义修改页面 当对话框关闭时,将表格数据重置-->
      <el-dialog title="修改用户" :visible.sync="updateDialogVisible" width="50%" @close="closeUpdateDialog">
        <!-- 定义用户提交表单数据-->
        <el-form :model="updateuser" :rules="rules" ref="updateUserRef" label-width="100px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="updateuser.username"  disabled ></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="updateuser.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="updateuser.email"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="updateDialogVisible = false" >取 消</el-button>
          <el-button type="primary" @click="updateUser">确 定</el-button>
        </span>
      </el-dialog>
  </div>

</template>

<script>
  export default {
    data() {
      const checkEmail = (rule, value, callback) => {
        const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
        if (emailRege.test(value)) {
          return callback()
        }
        callback(new Error('请填写正确的邮箱地址'))
      }
      const checkPhone = (rule, value, callback) => {
        const phoneRege = /^1[3456789][0-9]{9}$/
        if (phoneRege.test(value)) {
          return callback()
        }
        callback(new Error('请填写正确的手机号'))
      }
      const checkPassword = (rule, value, callback) => {
        if(this.saveuser.password !== value) return callback(new Error('2次密码输入不一致'))
        callback()
      }
      return {
        user: [{
          id: '',
          username: '',
          phone: '',
          email:'',
          status:''
        }],
        dialogVisible : false,
        saveuser:{
          username:'',
          password:'',
          password2:'',
          phone:'',
          email:''
        },
        updateuser:{
          id:'',
          username:'',
          phone:'',
          email:''
        },
        rules: {
          username: [
                  { required: true, message: '请输入用户名', trigger: 'blur' },
                  { min: 2, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                ],
          password: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                ],
          password2: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
                  { validator: checkPassword , trigger: 'blur' }
                ],
          phone: [
                  { required: true, message: '请输入手机号', trigger: 'blur' },
                  { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
                  { validator: checkPhone , trigger: 'blur' }
                ],
          email: [
                  { required: true, message: '请输入邮箱', trigger: 'blur' },
                  { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
                  { validator: checkEmail , trigger: 'blur' }
                ]
        },
        updateDialogVisible : false
      }
    },
    methods:{
      async getAll() {
          let {data: result} = await this.$http.get("/users/getAll")
          console.log(result)
          this.user = result
      },
      closeDialog(){
        //重置表格数据
        this.$refs.addUserRef.resetFields()
      },
      async deleteUser(user){
        let y = confirm("是否删除?")
        if(y == true){
          let {data} = await this.$http.delete(`/users/deleteuser/${user.id}`)
          if(data.status !== 200) return this.$message.error("删除失败")
          this.$message.success("删除成功")
          this.getAll()
        }
      },
     async updateUserBtn(user){
        this.updateDialogVisible = true
        let {data} = await this.$http.get(`/users/getById/${user.id}`)
        if(data.status !== 200) return this.$message.error("查询失败")
        this.updateuser = data.data
     },
     async updateUser(){
       let y = confirm("确认更改吗?")
       if(y == true){
         this.$refs.updateUserRef.validate(async valid => {
            if(!valid)  return this.$message.error("表单验证没有通过")
         let newuser = {}
       newuser.id = this.updateuser.id
       newuser.phone= this.updateuser.phone
       newuser.email = this.updateuser.email
       let {data} = await this.$http.put("/users/updateUser",newuser)
       if(data.status !== 200) return this.$message.error("更新失败")
       this.$message.success("更新成功")
       this.updateDialogVisible = false
       this.getAll()
          })
        }
       },
       async updateStatus(user){
          let {data} = await this.$http.put(`/users/userStutas/${user.id}/${user.status}`)
          if(data.status !==200) return this.$message.error("更新失败")
          this.$message.success("更新成功")
          this.getAll()
     },
     closeUpdateDialog(){
       this.$refs.updateUserRef.resetFields()
     },
     async addUserBtn(){
         this.$refs.addUserRef.validate(async valid => {
           if(!valid) return this.$message.error("页面提交失败")
         let {data} = await this.$http.post("/users/saveUser",this.saveuser)
         if(data.status !==200) return this.$message.error("插入失败")
         this.$message.success("插入成功")
         this.dialogVisible = false
         this.getAll()
       })
     },
     
    },
    created(){
      this.getAll()
    },
  }
</script>

<style>
</style>
